<?php 
  // no direct access 
  defined( '_JEXEC' ) or die( 'Restricted access' );
  

$leftColumnWidth			= $this->params->get("leftColumnWidth", 20);
$showLeftColumn = $this->countModules('left') > 0;
$leftColumnWidth *= $showLeftColumn;

$rightColumnWidth			= $this->params->get("rightColumnWidth", 20);
$showRightColumn = $this->countModules('right') > 0;
$showRightColumn &= JRequest::getCmd('layout') != 'form';
$showRightColumn &= JRequest::getCmd('task') != 'edit';
$rightColumnWidth *= $showRightColumn;

if (($leftColumnWidth + $rightColumnWidth) > 80)
{
  $rightColumnWidth = 20;
}
if (($leftColumnWidth + $rightColumnWidth) > 80)
{
  $leftColumnWidth = 20;
}

$contentWidth = 100 - $leftColumnWidth - $rightColumnWidth;
$templatePath = '/templates/' . $this->template;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"\
>

<html xmlns="http://www.w3.org/1999/xhtml" 
      xml:lang="<?php echo $this->language; ?>" 
      lang="<?php echo $this->language; ?>" 
>

  <head>
    <link rel="shortcut icon" href="/templates/<?php echo $this->template ?>/images/favicon.ico" />
    <jdoc:include type="head" />
    <!-- link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" /-->
    <!-- link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" /-->
    <!--link rel="stylesheet" href="<?php echo $templatePath; ?>/css/template.css" type="text/css" /-->
    <link rel="stylesheet" href="<?php echo $templatePath; ?>/css/wb_menu.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $templatePath; ?>/css/mn_menu.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $templatePath; ?>/css/mooRainbow.css" type="text/css" />
    <script type="text/javascript" src="<?php echo $templatePath; ?>/js/mooRainbow.js"></script>    
    <script type="text/javascript" src="<?php echo $templatePath; ?>/js/wb_first.js"></script>    
    <style type="text/css">
*
{
  margin:0;
  padding:0;
}

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address 
{
  margin:0.5em 0;
}

li,dd 
{
  margin-left:1em;
}

fieldset 
{
  padding:.5em;
}

body 
{
  text-align:center;
  line-height:1.3;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:76%;
}
#wrap
{
  text-align:left;
  margin:0 auto;
  border: 1px solid #999;
}
body.fluid div#wrap
{
  min-width:760px;
  max-width:960px;
  width:auto;
}
body.small div#wrap
{
  width:760px;
}
body.medium div#wrap
{
  width:960px;
}
#header
{
  border-bottom: 1px solid #999;
  height:100px;
}
#left
{
  float:left;
  width:20%;
  overflow:hidden;  
}
#content
{
  float:left;
  overflow:hidden;
}
#right
{
  float:left;
  width:20%;
  overflow:hidden;  
}
#footer
{
  clear:both;
  border-top: 1px solid #999;
}
.inside
{
  padding:10px;
}
a 
{
  text-decoration:none;
}

a:hover 
{
  text-decoration:underline;
}

h1,.componentheading 
{
  font-size:1.7em;
}

h2,.contentheading 
{
  font-size:1.5em;
}

h3 
{
  font-size:1.3em;
}

h4 
{
  font-size:1.2em;
}

h5 
{
  font-size:1.1em;
}

h6
{
  font-size:1em;
  font-weight:700;
}

#footer,.small,.createdate,.modifydate,.mosimage_caption 
{
  font:0.8em Arial,Helvetica,sans-serif;
  color:#999;
}
.moduletable
{
  margin-bottom:1em;
  border:1px #CCC solid;
  padding:0 10px;
}

.moduletable h3 
{
  background:#666;
  color:#fff;
  text-align:center;
  font-size:1.1em;
  margin:0 -10px 0.5em;
  padding:0.25em 0;
}
.blog
{
  width:100%
}

.background_wb
{
  background-image: url(../images/wim1.png);
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: 0pt 0pt;
  
}
.background_jwb
{
  background: transparent url(../images/wim3.png) repeat fixed 0pt 0pt;
}

#left.left-left
{
  float:left;
}
#content.left-left
{
  float:right;
}
#right.left-left
{
  float:left;
}

#left.left-right
{
  float:left;
}
#content.left-right
{
  float:left;
}
#right.left-right
{
  float:right;
}

#left.right-right
{
  float:right;
}
#content.right-right
{
  float:left;
}
#right.right-right
{
  float:right;
}
#logo
{
  height:75px;
  float:left;
}
#wbRainbow
{
  float:left;
  line-height:90px;
  margin-left:100px;
}


    #right
    {
      width:<?php echo $rightColumnWidth ?>%;
    }
    #left
    {
      width:<?php echo $leftColumnWidth ?>%;
    }
    #content
    {
      width:<?php echo $contentWidth ?>%;
    }
    #wrap
    {
      background: <?php echo $this->params->get('wrap_background_color');?>;
    }
    body
    {
      background: <?php echo $this->params->get('border_background_color');?>;
    }
    #id1
    {
      position:absolute; 
      display:block; 
      background: #FCFCFF; 
      left:100px; 
      top:100px;
    }
    #id2
    {
      position:relative; 
      background:#FFFCFC; 
      border:1px solid black; 
      height: 310px; 
      width:390px;
    }
    #id3
    {
      position:absolute;
      border:1px solid red;
      height: 256px;
      margin-top:9px;
      margin-left:280px;
      width:19px;
      
    }
    

    </style>
    
  </head>

  <body>
    <img id="myRainbow" src="<?php echo $templatePath ?>/images/rainbow.png" alt="[r]" width="16" height="16" />
    <input id="myInput" name="myInput" type="text" size="13" />
    
    <div id="id1">
      <div id="id2">
        <img id="id3" src="/templates/wb_first/images/moor_slider.png"/>
        </div>
      </div>
    </div>
    
    
  </body>  
</html>



